<template>
  <TopNav title="个人中心"/>
  <div class="container">
    <!--个人信息 start-->
    <van-cell-group class="cell-list">
      <van-cell title="头像">
        <img slot="right-icon" :src="userDesc.userImg">
      </van-cell>
      <van-cell to="/user/desc/nickname" title="昵称" is-link :value="userDesc.nickname"/>
      <van-cell @click="propSexShow=true" title="性别" is-link :value="userDesc.userSex"/>
      <van-cell title="手机号" is-link :value="userDesc.phone"/>
    </van-cell-group>
    <!--个人信息 end-->
    <!--退出登录 start-->
    <van-button @click="logoutHandle" class="button" round>切换账号</van-button>
    <!--退出登录 end-->
    <!--性别弹出框 start-->
    <el-drawer
        v-model="propSexShow"
        direction="btt"
        size="50%"
        class="sex-prop"
        :show-close="false"
    >
      <el-radio-group class="radio" v-model="userDesc.userSex">
        <el-radio value="男" size="large">男</el-radio>
        <el-radio value="女" size="large">女</el-radio>
      </el-radio-group>
      <el-button @click="changeSex()" class="sex-button" round>确定</el-button>
    </el-drawer>
    <!--性别弹出框 end-->
  </div>
</template>

<script setup>

import {useDataStore} from "@/stores/dataStore.js";
import {useRoute, useRouter} from 'vue-router'
import TopNav from "@/components/TopNav/Back.vue"
import {onMounted, reactive, ref} from "vue";
import userAxios from "@/api/user.js";

const route = useRoute()
//route.params.name;
const router = useRouter()
const dataStore = useDataStore()
//用户详情
const userDesc = reactive({
  userId: '',
  userImg: '',
  nickname: '',
  username: '',
  password: '',
  phone: '',
  email: '',
  userSex: '',
  signature: '',
  userIntroduce: '',
  userStatus: '',
  fullName: '',
  birthDate: '',
  addressNow: '',
})
onMounted(() => {
  http_user_findById()
})
/**
 * 根据id查询用户
 *  */
const http_user_findById = () => {
  userAxios.user_findById({
    userId: dataStore.userId
  }).then(res => {
    if (res.data.code == 200) {
      userDesc.userId = res.data.data.userId;
      userDesc.userImg = res.data.data.userImg;
      userDesc.nickname = res.data.data.nickname;
      userDesc.username = res.data.data.username;
      userDesc.password = res.data.data.password;
      userDesc.phone = res.data.data.phone;
      userDesc.email = res.data.data.email;
      userDesc.userSex = res.data.data.userSex;
      userDesc.signature = res.data.data.signature;
      userDesc.userIntroduce = res.data.data.userIntroduce;
      userDesc.userStatus = res.data.data.userStatus;
      userDesc.fullName = res.data.data.fullName;
      userDesc.birthDate = res.data.data.birthDate;
      userDesc.addressNow = res.data.data.addressNow;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })
}
/**
 * 修改用户信息
 */
const http_user_update = () => {
  userAxios.user_update({
    userId: userDesc.userId,
    userImg: userDesc.userImg,
    nickname: userDesc.nickname,
    username: userDesc.username,
    password: userDesc.password,
    phone: userDesc.phone,
    email: userDesc.email,
    userSex: userDesc.userSex,
    signature: userDesc.signature,
    userIntroduce: userDesc.userIntroduce,
    userStatus: userDesc.userStatus,
    fullName: userDesc.fullName,
    birthDate: userDesc.birthDate,
    addressNow: userDesc.addressNow,
  }).then(res => {
    if (res.data.code == 200) {
      http_user_findById()
      ElMessage.success('修改成功')
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 性别选择
 */
//性别选择弹出
const propSexShow = ref(false)
//修改性别
const changeSex=()=>{
  http_user_update()
  propSexShow.value=false
}
/**
 * 退出登录
 */
const logoutHandle = () => {
  ElMessageBox.confirm(
      '确定要退出吗',
      '确定退出',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    dataStore.isLogin = false

    dataStore.token = ''

    dataStore.userId = ''
    dataStore.userImg = ''
    dataStore.nickname = ''
    router.push("/home/login")
    ElMessage.success('退出成功')
  }).catch(error => {
    ElMessage.info("取消")
  })
}
</script>
<style scoped lang="scss">
.cell-list {
  img {
    border-radius: 90px;
    width: 40px;
    height: 40px;
  }
}
.sex-prop{
  .radio{
    display: block;
    margin-left: 40%;
  }
  .sex-button{
    margin-top: 30px;
    margin-left: 30%;
    width: 40%;
  }
}
.button {
  position: fixed;
  bottom: 5px;
  margin-left: 2%;
  width: 96%;
}

</style>
